import React, {useCallback, useRef} from 'react';
import {GTable, GTableSchema, GTree} from 'geminis-react';
import {Divider} from 'antd';
import styles from './index.less';
import {UserPassword} from "@/pages/users/components/password";

export default () => {
    const tree = useRef<any>();
    const table = useRef<any>();

    const onTreeSelected = useCallback(
        ({selectedKeys}: any) => {
            table.current.loadData({organizationId: selectedKeys[0]});
        },
        [table]
    );

    const schema: GTableSchema = {
        headerTitle: '用户信息',
        data: {
            url: '/api/resources/user',
            sort: ['name:asc'],
        },
        manualRequest: true,
        action: {
            row: {
                render: (record: any) => [
                    <UserPassword key={record.id} id={record.id} username={record.name}/>
                ],
            },
        },
    };

    return (
        <div className={styles.main}>
            <div className={styles.tree}>
                <GTree
                    ref={tree}
                    url="/api/resources/organization/children/"
                    onSelected={onTreeSelected}
                />
            </div>
            <Divider type="vertical" className={styles.fullHeight}/>
            <div className={styles.content}>
                <GTable
                    ref={table}
                    schema={schema}
                    schemaPath="/auth-pc/schema/user/table.json"
                />
            </div>
        </div>
    );
};